<template>
  <div class="home">
    <!-- 头部banner -->
    <Header />
    <!-- 轮播 -->
    <!-- <Slideshow style="margin-top: 80px" /> -->
    <main class="container">
      <SlideDodwn :data="carouselList" />
      <LiveStreamingRoomList
        @orderLiveStreamingFun="orderLiveStreamingFun"
        :liveStreamingRoomList="liveStreamingRoomList"
      />
      <Teacher :data="hotTeacherList" />
      <Information :data="communityList" />

      <!-- <Stage /> -->
    </main>
    <RightBottomNav />
  </div>
</template>

<script setup lang="ts">
import Header from "@/components/header/Header.vue";
// import Stage from "./components/Stage.vue";
import Teacher from "./components/Teacher.vue";
import LiveStreamingRoomList from "./components/LiveStreamingRoomList.vue";
import SlideDodwn from "@/components/slideshow/index.vue";
import Information from "./components/Information.vue";
import RightBottomNav from "@/components/right-bottom-nav/RightBottomNav.vue";

import { useHome } from "./hook";

const {
  liveStreamingRoomList,
  carouselList,
  hotTeacherList,
  communityList,
  orderLiveStreamingFun
} = useHome();
</script>

<style lang="scss" scoped>
.video {
  // width: 800px;
  // height: 400px;
  background-color: black;
}
.home {
  background-color: var(--bg-color);
  min-height: 100vh;
  width: 100%;

  .container {
    margin: 20px auto;
    // overflow: hidden;
    width: 1200px;
  }
}
.login_box {
  padding: 20px 40px;

  &:deep(.el-form-item) {
    margin-bottom: 20px;

    .el-input {
      height: 40px;
    }
  }

  &:deep(.el-button) {
    width: 100%;
  }
}
.home {
  height: 100vm;
  width: 100vm;
  // margin: 0 auto;
  display: flex; //使页面全部居中在中间
  flex-direction: column;
  // justify-content: center;
  align-items: center;
}

.live_streaming_dialog {
  width: 100%;
  height: 100%;
  padding: 20px;

  .live_streaming_content {
    width: 100%;
    height: 100%;
    // display: flex;
    // justify-content: center;
    // align-items: center;

    .item {
      width: 100%;
      // text-align: center;
      margin-bottom: 10px;

      .value {
        font-size: 18px;
        font-weight: bold;
      }
    }

    .tip {
      width: 100%;
      margin-top: 50px;
      font-size: 13px;
      cursor: pointer;
      color: #409eff;
    }
  }
}

.btns {
  width: 100%;
  height: 100%;

  &::deep(.el-button) {
    width: 100px;
  }
}
</style>
